<template>
  <!-- index name-->
  <div>
    <Card>
      <el-form>
        <el-row>
          <el-col :span="5">
            <el-form-item prop="yearMonth" label="">
              <el-date-picker v-model="queryParams.yearMonth" type="month" placeholder="选择月" style="width: 100%;">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item prop="manageType" label="">
              <el-select v-model="queryParams.manageType" placeholder="渠道分类" style="width: 100%;">
                <el-option
                  v-for="item in [{ label: '网销渠道', value: '1' }, { label: '银保营业部', value: '2' }, { label: '经代渠道', value: '3' }]"
                  :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item prop="managecome" label="">
              <el-select v-model="queryParams.managecome" placeholder="渠道" style="width: 100%;">
                <el-option v-for="item in aaMa" :key="item.key" :label="item.value" :value="item.key">
                </el-option>
              </el-select>
              <!-- <Cascader v-model="queryParams.managecome" change-on-select :data="organizationList" placeholder="渠道"
                clearable style="width: 100%;">
              </Cascader> -->
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="">
              <el-button type="primary" @click="search">查询
              </el-button>
              <el-button type="info" plain @click="resetQuery">重置
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </Card>
    <Card style="margin-top: 20px;">
      <el-table v-loading="loading" :data="tableList" border style="width: 100%;">
        <el-table-column type="index" width="55" align="center" label="序号" fixed="left" />
        <el-table-column label="渠道名称" align="center" prop="aaa" min-width="180" />
        <el-table-column label="品质等级" align="center" prop="bbb" />
        <el-table-column label="综合得分" align="center" prop="ccc" />
        <el-table-column label="13个月年度累计应收保费" align="center" prop="ddd" width="170" />
        <el-table-column label="13个月年度继续率" align="center" prop="eee" width="140" />
        <el-table-column label="25个月年度继续率" align="center" prop="fff" width="140" />
        <el-table-column label="当月二次年度累计保费继续率" align="center" prop="ggg" width="200" />
        <el-table-column label="交办件处理失效" align="center" prop="hhh" width="130" />
        <el-table-column label="调整情况" align="center" prop="hhh" width="130">
          <template slot-scope="scope">
            <span style="color: #4AA0FF;">{{ scope.row.iii }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" fixed="right">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="uploadExcel(scope.row)">查看详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
        @pagination="getList" />
    </Card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      total: 3,
      loading: false,
      organizationList: [],
      queryParams: {
        managecome: [],
      },
      tableList: [{
        aaa: 'I云保', bbb: 'CC', ccc: '67.22',
        ddd: '42.32', eee: '91%', fff: '96%',
        ggg: '56%', hhh: '23', iii: '升至CC级'
      }, {
        aaa: '慧择', bbb: 'AA', ccc: '73.22',
        ddd: '0.00', eee: '94%', fff: '92%',
        ggg: '76%', hhh: '16', iii: '升至AA级'
      }, {
        aaa: '明亚经纪', bbb: 'D', ccc: '45.22',
        ddd: '0.00', eee: '91%', fff: '75%',
        ggg: '66%', hhh: '33', iii: '升至D级'
      },],
    }
  },
  created() {
    this.getAllOrganization()
  },
  methods: {
    search() { },
    getList() { },
    resetQuery() { },
    uploadExcel() {
      this.$router.push({
        // name: "qualityReport",
        path: "qualityReport",
      });
    },
    getAllOrganization() {
      this.api.remanagecomList().then(res => {
        if (res.code == 200 && res.data != null) {
          // this.organizationList = [res.data]
          // return
          let arr = []
          arr.push(res.data)
          arr.forEach(one => {
            one.value = one.comcode
            one.label = one.comcode + '-' + one.name
            one.children = one.chilDren || []
            if (one.children) {
              one.chilDren.forEach(two => {
                two.value = two.comcode
                two.label = two.comcode + '-' + two.name
                two.children = two.chilDren || []
                if (two.children) {
                  two.children.forEach(three => {
                    three.value = three.comcode
                    three.label = three.comcode + '-' + three.name
                    three.children = three.chilDren || []
                    if (three.children) {
                      three.children.forEach(four => {
                        four.value = four.comcode
                        four.label = four.comcode + '-' + four.name
                        four.children = four.chilDren || []
                      })
                    }
                  })
                }
              })
            }
          })
          console.log(arr);
          this.organizationList = arr
        } else {
          this.organizationList = [];
        }
      });
    },
  }
}
</script>

<style lang="less" scoped>